<!doctype html>
<html>
<head>
	<title>DataBind : Default</title>
	
	<link href="Styles/static.css" type="text/css" rel="Stylesheet" />
	
</head>
<body>
    
    <div id="example1">
        <h2>Example 1</h2>

        <p>Binding text to an element. The id of the element is matched to the value in the object.</p>
        <pre>var data = { title: 'Lorem ipsum', text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.' };
$(document).binddata(data);</pre>
        <iframe src="example1.htm"></iframe>
    </div>

    <div>
        <h2>Example 2</h2>

        <p>Binding data to a form. An array populates the drop down. The ids in the form are matched to the object.
        <br />Note: data and list would probably be retrieved via an ajax call.</p>
        <pre>var list = { gender: [[0, 'Female'], [1, 'Male']] };
var data = { name: 'John Doe', age: 35, gender: 1 };

$('#form1').binddata(list); //Bind the select
$('#form1').binddata(data); //Bind the data</pre>

        <iframe src="example2.htm"></iframe>
    </div>	

   <div>
        <h2>Example 3</h2>

        <p>Binding data with a mapping object. The map translates between the object keys and the form ids.
        <br />Note: data would normally be retrieved via an ajax call.</p>
        <pre>var map = { name: '#txtName', age: '#txtAge', gender: '#drpGender', genders: '#drpGender' };
var data = { name: 'Jane Doe', age: 27, genders: [[0, 'Female'], [1, 'Male']], gender: 0 };

$('#form1').binddata(data, map); //Bind with a map</pre>

        <iframe src="example3.htm"></iframe>
    </div>	

   <div>
        <h2>Example 4</h2>

        <p>Binding data with a function. Each value in the object is passed to the function with the candidate selector.
        </p>
        <pre>var map = { gender: '#drpGender', genders: '#drpGender' };
var data = { name: 'Billy Bob', age: 55, genders: [[0, 'Female'], [1, 'Male']], gender: 1 };

//Bind with a map and a function
$('#form1').binddata(data, map, function(args) {

    //Set selector
    if (args.selector == '#name') { args.selector = '#txtName'; };
    if (args.selector == '#age') { args.selector = '#txtAge'; };

    return true;
});</pre>

        <iframe src="example4.htm"></iframe>
    </div>

   <div>
        <h2>Example 5</h2>

        <p>Bind array data to a table or tbody. Existing data is cleared. Column position is mapped to array position.
        </p>
        <pre>var array = [['23 april 2009', 'Dreams from my Father', 24.99], ['1 May 2009', 'The Fame', 7.99]];
var map = [0, 2, 1];
	        
$('#purchases').binddata(array, map);</pre>

        <iframe src="example5.htm" style="width:500px"></iframe>
    </div>

   <div>
        <h2>Example 6</h2>

        <p>Bind array of objects to a table with a map and function to right align the amount column.
        </p>
        <pre>var purchases = [{ date: '23 april 2009', title: 'Dreams from my Father', amount: 24.99 }, 
    { date: '1 May 2009', title: 'The Fame', amount: 7.99}];
var map = ['date', 'amount', 'title'];

$('#purchases').binddata(purchases, map, function(args) {

    //Align totals to the right
    if (args.key == 'amount') args.selector = '&lt;td class="numeric"&gt;';
    return true;
});</pre>

        <iframe src="example6.htm" style="width:500px"></iframe>
    </div>	
    
    <div>
        <h2>Example 7</h2>

        <p>Unbinds form inputs into a new json object.
        </p>
        <pre>var map = { gender: '#drpGender' };
var data = {};

$('#form1').unbinddata(data, map); //Unbind with a map
</pre>

        <iframe src="example7.htm" style="width:500px"></iframe>
    </div>	
</body>
</html>
